<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import BookList from "@/components/BookList.vue";

const typeList = ref([])
const topPage = ref([])
const typePage = ref([])
const activeName = ref("hotSelling"); // 激活的标签页名字

// 初始化图书类别
// const initBookType = ()=>{
//   console.log('初始化图书类别')
//   axios.get("/bookType/findAll").then(res=>{
//     console.log('res', res)
//   })
// }

// async 关键字意味着函数内部会有异步操作，通常与 await 配合使用，以处理异步任务。
// await 关键字会等待这个请求完成，并将其返回的响应对象（通常是一个包含响应数据的对象）赋值给 resp 变量。
const initBookType = async ()=>{
  console.log('初始化图书类别')
  try {
    const resp = await axios.get("/bookType/findAll");
    typeList.value = resp.data;
    console.log(typeList.value)
  } catch (e) {
    console.log('初始化图书类别异常', e)
  }
}

// 热销榜参数
const param = ref({
  pageNum: 1,
  pageSize: 12
})
// 请求后台：查询热销榜
const initTop = async ()=>{
  const resp = await axios.post("/book/top",param.value);
  topPage.value = resp.data;
}
// 子页面点击换页，这里要重新查询
const handleCurrentPage = (pageNum) => {
  param.value.pageNum = pageNum
  initTop()
}

const handleTypeCurrentPage = (pageNum) => {
  param.value.pageNum = pageNum
  findByType()
}

onMounted(()=>{
  initBookType()
  // 查询热销榜
  initTop()
})

// 选项卡切换事件
const handleTabChange = (tab) => {
  console.log('选项卡切换事件', tab)

  // 获取当前标签页的typeId
  const typeId = tab.props.name;

  if (typeId === 'hotSelling') {
    // 获取热销榜参数
    param.value.typeId = null
    // 刷新热销榜
    initTop()
  } else {
    // 获取当前标签页的typeId
    param.value.typeId = typeId
    // 根据类别查询图书
    findByType()
  }
}

// 根据类别查询图书
const findByType = async ()=>{
  const resp = await axios.post("/book/findByType",param.value);
  typePage.value = resp.data;
}

</script>

<template>
  <div>
    <!-- 导航标签页  -->
    <el-tabs type="border-card" @tab-click="handleTabChange" v-model="activeName">
      <!-- 第1个标签页，默认显示的 -->
      <el-tab-pane name="hotSelling">
        <template #label>
          <el-icon><Document /></el-icon>热销榜
        </template>
        <book-list :book-list="topPage.records"
                   :current-page="param.pageNum"
                   :page-size="param.pageSize"
                   :total-items="topPage.total"
                   @change-page="handleCurrentPage">
        </book-list>
      </el-tab-pane>
      <!-- 从数据库表中查询出来并且显示 -->
      <el-tab-pane v-for="type in typeList" :key="type.id" :label="type.name" :name="String(type.id)">
        <template #label>
          <el-icon><Notebook /></el-icon>{{ type.name }}
        </template>

        <book-list :book-list="typePage.records"
                   :current-page="param.pageNum"
                   :page-size="param.pageSize"
                   :total-items="typePage.total"
                   @change-page="handleTypeCurrentPage">
        </book-list>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>

</style>
